<template>
  <div class="container">
    <scroll-view class="scroll_x" :scroll-x="true" scroll-with-animation>
      <view
        v-bind:class="[currentTab == 0 ? 'active' : '','tab_item' ]"
        data-current="0"
        @tap="switchNav"
      >
        <text>一次</text>
      </view>
      <view
        v-bind:class="[currentTab == 1 ? 'active' : '','tab_item' ]"
        data-current="1"
        @tap="switchNav"
      >
        <text>每月</text>
      </view>
      <view
        v-bind:class="[currentTab == 2 ? 'active' : '','tab_item' ]"
        data-current="2"
        @tap="switchNav"
      >
        <text>每年</text>
      </view>
    </scroll-view>
    <swiper
      class="swiper"
      :current="currentTab"
      @change="switchTab"
      duration="500"
      v-bind:style="{ height: winHeight + 'rpx' }"
    >
      <swiper-item>
        <ul v-if="list.length !== 0">
          <div v-if="afterlist.length !== 0">
            <div class="heading">即将到来的特殊日期</div>
            <div class="wrap_box" v-for="(item,index) in afterlist" :key="index">
              <div class="wrap_box_top">
                <div class="time">
                  <span>时间: {{item.year}}-{{item.month}}-{{item.day}}</span>
                </div>
                <div class="title">
                  <span>标题: {{item.title}}</span>
                </div>
                <div class="remark">
                  <span>备注: {{item.remark}}</span>
                </div>
              </div>
              <div class="wrap_box_bottom">
                <div class="delete flex" @tap="deleting(item.id,1)">
                  <i></i>
                  <span>删除</span>
                </div>
                <div
                  class="add flex"
                  @tap="addschedule(item.year,item.month,item.day.item.title,item.name)"
                >
                  <i></i>
                  <span>加入</span>
                </div>
              </div>
            </div>
          </div>
          <div v-if="beforelist.length !== 0">
            <div class="heading">已经过去的特殊日期</div>
            <div class="wrap_box" v-for="(item,index) in beforelist" :key="index">
              <div class="wrap_box_top">
                <div class="time">
                  <span>时间: {{item.year}}-{{item.month}}-{{item.day}}</span>
                </div>
                <div class="title">
                  <span>标题: {{item.title}}</span>
                </div>
                <div class="remark">
                  <span>备注: {{item.remark}}</span>
                </div>
              </div>
              <div class="wrap_box_bottom">
                <div class="delete flex" @tap="deleting(item.id,1)">
                  <i></i>
                  <span>删除</span>
                </div>
                <div
                  class="add flex"
                  style="border-color: rgba(53,53,53,0.5);color: rgba(53,53,53,0.5);"
                >
                  <span class="plusign"></span>
                  <span>加入</span>
                </div>
              </div>
            </div>
          </div>
        </ul>
        <ul v-else>
          <Empty message="未建立特殊日期哦"></Empty>
        </ul>
      </swiper-item>
      <swiper-item>
        <ul v-if="list2.length !== 0">
          <div
            class="wrap_box"
            v-for="(item,index) in list2"
            :key="index"
            style="margin-top: 16rpx;"
          >
            <div class="wrap_box_top">
              <div class="time">
                <span>时间: {{item.year}}-{{item.month}}-{{item.day}}</span>
              </div>
              <div class="title">
                <span>标题: {{item.title}}</span>
              </div>
              <div class="remark">
                <span>备注: {{item.remark}}</span>
              </div>
            </div>
            <div class="wrap_box_bottom">
              <div class="delete flex" @tap="deleting(item.id,2)">
                <i></i>
                <span>删除</span>
              </div>
              <div
                class="add flex"
                @tap="addschedule(item.year,item.month,item.day,item.title,item.name)"
              >
                <i></i>
                <span>加入</span>
              </div>
            </div>
          </div>
        </ul>
        <ul v-else>
          <Empty message="未建立特殊日期哦"></Empty>
        </ul>
      </swiper-item>
      <swiper-item>
        <ul v-if="list3.length !== 0">
          <div
            class="wrap_box"
            v-for="(item,index) in list3"
            :key="index"
            style="margin-top: 16rpx;"
          >
            <div class="wrap_box_top">
              <div class="time">
                <span>时间: {{item.year}}-{{item.month}}-{{item.day}}</span>
              </div>
              <div class="title">
                <span>标题: {{item.title}}</span>
              </div>
              <div class="remark">
                <span>备注: {{item.remark}}</span>
              </div>
            </div>
            <div class="wrap_box_bottom">
              <div class="delete flex" @tap="deleting(item.id,3)">
                <i></i>
                <span>删除</span>
              </div>
              <div
                class="add flex"
                @tap="addschedule(item.year,item.month,item.day,item.title,item.name)"
              >
                <i></i>
                <span>加入</span>
              </div>
            </div>
          </div>
        </ul>
        <ul v-else>
          <Empty message="未建立特殊日期哦"></Empty>
        </ul>
      </swiper-item>
    </swiper>
    <div class="edit" @tap="addspecial"></div>
    <div class="mask flex" v-if="ishow" @tap="hideschedule">
      <div class="dayinfo" @tap.stop="prevent">
        <div class="title flex">
          <span>填写日程的信息</span>
        </div>
        <form @submit="formSubmit">
          <div style="padding-left: 32rpx;">
            <div class="section flex">
              <span class="section_title">日程日期 :</span>
              <picker class="flex-item section_body" mode="date" :value="date" @change="dateChange">
                <view class="picker">{{date}}</view>
              </picker>
            </div>
            <div class="section flex">
              <span class="section_title">日程提示:</span>
              <textarea
                class="flex-item section_body"
                auto-height
                :value="prompt"
                placeholder="请填写备注信息可不填"
                placeholder-style="color:rgba(153, 153, 153, 0.5);font-size: 28rpx;"
              />
            </div>
          </div>
          <button class="submit" form-type="submit" :disabled="disabled">提交</button>
        </form>
      </div>
    </div>
    <van-dialog id="van-dialog"/>
  </div>
</template>

<script>
import wx from 'wx'
import moment from 'moment'
import api from '@/utils/api'
import Toast from '@/utils/toast'
import Empty from '@/components/empty'
import Dialog from '../../../../static/vant/dialog/dialog'
export default {
  data () {
    return {
      guest_id: '',
      user_id: '',
      currentTab: 0,
      winHeight: '',
      list: [],
      beforelist: [],
      afterlist: [],
      list2: [],
      list3: [],
      date: '点击选择日期',
      year: '',
      month: '',
      day: '',
      prompt: '',
      ishow: false,
      show: false,
      permission: false,
      disabled: false
    }
  },
  components: {
    Empty
  },
  async onReady () {
    const that = this
    const userInfo = wx.getStorageSync('userInfo')
    // 接收客户id
    that.guest_id = that.$route.query.id
    // 获取修改客户档案权限
    that.permission = userInfo.authority.guest_del_date
    // 接收员工id
    that.user_id = userInfo.user_id
    // 请求数据
    await Promise.all([
      that.init(),
      that.get_info(1),
      that.get_info(2),
      that.get_info(3),
      that.getswiperheight()
    ])
  },
  methods: {
    init () {
      const that = this
      that.list = []
      that.list2 = []
      that.list3 = []
    },
    async getswiperheight () {
      const that = this
      try {
        const res = wx.getSystemInfoSync()
        const clientHeight = res.windowHeight
        const clientWidth = res.windowWidth
        const rpxR = 750 / clientWidth
        const calc = clientHeight * rpxR - 84
        that.winHeight = calc
      } catch (e) {
        console.log(e)
      }
    },
    switchNav (e) {
      let that = this
      let cur = e.currentTarget.dataset.current
      if (that.currentTab !== cur) {
        that.currentTab = cur
      }
    },
    switchTab (e) {
      this.currentTab = e.target.current
    },
    async get_info (type) {
      const that = this
      const res = await api.getguestspecialdate({
        guest_id: that.guest_id,
        type: type
      })
      if (res.code === '100') {
        let beforelist = []
        let afterlist = []
        if (type === 1) {
          const nowtime = Date.parse(new Date()) / 1000
          res.data.forEach((e, i) => {
            const time = moment(e.year + '-' + e.month + '-' + e.day).unix()
            if (nowtime < time) {
              afterlist.push(e)
            } else {
              beforelist.push(e)
            }
          })
        }
        switch (type) {
          case 1:
            that.list = res.data
            that.afterlist = afterlist
            that.beforelist = beforelist
            break;
          case 2:
            that.list2 = res.data
            break;
          case 3:
            that.list3 = res.data
            break;
          default:
            break;
        }
      } else {
        switch (type) {
          case 1:
            that.list = []
            break;
          case 2:
            that.list2 = []
            break;
          case 3:
            that.list3 = []
            break;
          default:
            break;
        }
      }
    },
    addschedule (year, month, day, title, name) {
      const that = this
      that.prompt = '[客户]' + name + '\n[日期]' + year + '-' + month + '-' + day + '\n[标题]' + title
      that.ishow = true
    },
    hideschedule () {
      this.ishow = false
    },
    dateChange (e) {
      const that = this
      const date = e.mp.detail.value
      const arr = date.split('-')
      that.year = arr[0]
      that.month = arr[1]
      that.day = arr[2]
      that.date = date
    },
    deleting (id, type) {
      const that = this
      if (!that.permission) {
        Toast('你没有权限删除日期!', 'noicon')
        return false
      }
      that.show = true
      Dialog.confirm({
        title: '提示',
        message: '确定删除本条特殊日期吗'
      }).then(async () => {
        const res = await api.postdelguestspecialdate({
          id: id
        })
        if (res.code === '100') {
          switch (type) {
            case 1:
              that.get_info(1)
              break;
            case 2:
              that.get_info(2)
              break;
            case 3:
              that.get_info(3)
              break;
            default:
              break;
          }
        }
        Toast(res.msg, 'noicon')
      }).catch(() => {

      })
    },
    addspecial () {
      const that = this
      if (!wx.getStorageSync('userInfo').authority.guest_add_date) {
        Toast('你没有权限添加日期!', 'noicon')
        return false
      }
      that.$router.push({ path: '/pages/guest/addspecialdate/addspecialdate', query: { id: that.guest_id } })
    },
    async formSubmit () {
      const that = this
      if (that.year === '') {
        Toast('请选择日期', 'noicon')
        return false
      }
      that.disabled = true
      const res = await api.postaddspecialdaymanage({
        year: that.year,
        month: that.month,
        day: that.day,
        remark: that.prompt,
        user_id: that.user_id
      })
      that.ishow = false
      that.disabled = false
      Toast(res.msg, 'noicon')
    },
    prevent () { }
  }
}
</script>

<style scoped>
.scroll_x {
  height: 84rpx;
  background-color: #ffffff;
}
.tab_item {
  display: inline-block;
  width: 33.33%;
  height: 100%;
  line-height: 84rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333333;
}
.tab_item.active text {
  border-bottom: 4rpx solid #ff4444;
  color: #ff4444;
}
.tab_item text {
  display: inline-block;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
}
.swiper {
  width: 100%;
  box-sizing: border-box;
}
.wrap_box {
  font-size: 28rpx;
  color: rgba(102, 102, 102, 1);
  background-color: #fff;
  margin-bottom: 16rpx;
}
.wrap_box_top {
  padding: 12rpx 0 30rpx 0;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
}
.wrap_box_top > div {
  padding-left: 28rpx;
}
.wrap_box_bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 92rpx;
  padding-right: 50rpx;
}
.wrap_box_bottom > div {
  width: 130rpx;
  height: 50rpx;
  line-height: 50rpx;
  border: 4rpx solid #ff4444;
  border-radius: 24rpx;
  font-size: 26rpx;
  color: #ff4444;
}
.wrap_box_bottom > div > i {
  margin-right: 8rpx;
}
.delete {
  margin-right: 30rpx;
}
.delete i {
  width: 18rpx;
  height: 22rpx;
  background: url(http://mytimg.178mr.com/delete.png) no-repeat;
  background-size: 100%;
}
.add i {
  width: 20rpx;
  height: 20rpx;
  background: url(http://mytimg.178mr.com/add.png) no-repeat;
  background-size: 100%;
}
.edit {
  position: fixed;
  right: 56rpx;
  bottom: 186rpx;
  width: 136rpx;
  height: 136rpx;
  background: url(http://mytimg.178mr.com/edit.png) no-repeat;
  background-size: 100%;
}
.dayinfo {
  width: 624rpx;
  height: 860rpx;
  border-radius: 24rpx;
  background-color: #fff;
}
.dayinfo .title {
  height: 70rpx;
  color: #ff4444;
  font-size: 32rpx;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
}
.dayinfo .section:first-child {
  height: 78rpx;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.1);
}
.dayinfo .section:last-child {
  height: 100rpx;
}
.dayinfo .section_title {
  margin-right: 20rpx;
  font-size: 28rpx;
  color: rgba(51, 51, 51, 1);
}
.dayinfo .section_body {
  color: rgba(153, 153, 153, 0.5);
  font-size: 28rpx;
}
.submit {
  width: 272rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #f44444;
  color: #fff;
  font-size: 36rpx;
  border-radius: 52rpx;
  margin-top: 260rpx;
}
.heading {
  height: 80rpx;
  line-height: 80rpx;
  padding-left: 26rpx;
  font-size: 30rpx;
  background-color: rgba(153, 153, 153, 0.2);
}
.plusign {
  position: relative;
  width: 16rpx;
  height: 2rpx;
  background-color: rgba(53, 53, 53, 0.5);
  margin-right: 4rpx;
}
.plusign::after {
  position: absolute;
  content: "";
  width: 16rpx;
  height: 2rpx;
  background-color: rgba(53, 53, 53, 0.5);
  transform: rotate(90deg);
  transform-origin: center;
}
</style>